<template>
    <div class="drag optional d-c-c" @click.stop="$parent.$parent.onEditer(index)"
        :class="{ selected: index === selectedIndex }" :style="processStyle(boxStyle())">
        <img v-img-url="item.params.imgUrl" :style="{ ...processStyle(imgStyle()), maxWidth: '100%' }" alt="">
        <div class="btn-edit-del">
			<div class="btn-del" @click.stop="$parent.$parent.onDeleleItem(index)">{{ $t('page.delete') }}</div>
		</div>
    </div>
</template>
<script>

export default {
    data() {
        return {
        }
    },
    props: ['item', 'index', 'selectedIndex'],

    methods: {
        boxStyle() {
            let style = {}
            for (let i in this.item.style) {
                if (i.startsWith('box_')) {
                    style[i.replace('box_', '')] = this.item.style[i]
                }
            }
            return style
        },
        imgStyle() {
            let style = {}
            for (let i in this.item.style) {
                if (i.startsWith('img_')) {
                    style[i.replace('img_', '')] = this.item.style[i]
                }
            }
            return style
        },
        processStyle(style) {
            const processedStyle = {};
            for (const key in style) {
                const value = style[key];
                // 处理需要单位的属性
                if (key.startsWith('padding') || key.startsWith('margin') ||
                    key.endsWith('Width') || key.endsWith('Height') ||
                    key.endsWith('Radius')) {
                    processedStyle[key] = typeof value === 'number' ? `${value}px` : value;
                }
                // 处理不需要单位的属性
                else if (key === 'flex' || key === 'zIndex' || key === 'opacity') {
                    processedStyle[key] = value;
                }
                // 其他属性可以根据需要添加处理逻辑
                else {
                    processedStyle[key] = value;
                }
            }
            return processedStyle;
        }

    }
}
</script>